<!--登录页面-->
<template>
  <div class="login_box">
    <!--    主要内容框-->
    <div class="login_content">
      <!--      左边-->
      <div class="login_left">
        <img alt="" src="../../assets/image/login_img.jpg" />
      </div>
      <!--      右边-->
      <div class="login_right">
        <div class="sys_title">管理系统</div>
        <!--        登录表单-->
        <div class="login_form">
          <el-input
            v-model="username"
            :disabled="isLoading"
            clearable
            maxlength="20"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            @keyup.enter.native="login"
          ></el-input>
          <el-input
            v-model="password"
            :disabled="isLoading"
            maxlength="20"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            @keyup.enter.native="login"
          ></el-input>
          <!--         提示信息-->
          <div v-if="isTips" class="login_tips">{{ tipsText }}</div>
        </div>
        <!--        登录按钮-->
        <div class="login_btn">
          <el-button :loading="isLoading" type="primary" @click="login"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      //登录按钮状态控制
      isLoading: false,
      // 提示信息显示状态
      isTips: false,
      // 提示信息
      tipsText: "",
    };
  },
  methods: {
    // 登录验证
    login() {
      this.isLoading = true;
      if (this.username === "" && this.password === "") {
        this.tipsText = "账号密码不能为空";
        this.isTips = true;
        this.isLoading = false;
      } else {
        this.isTips = false;
        this.tipsText = "";
        this.goHome();
      }
    },
    // 跳转首页
    goHome() {
      let user = {
        photoUrl:
          "https://qny.samt.top/2SN2472MG0wpji.jpg",
        username: "水哥",
      };
      localStorage.setItem("user", JSON.stringify(user));
      this.$router.push("/screenGroup/index");
      this.isLoading = false;
    },
  },
};
</script>
<style scoped>
.login_box {
  background: url("../../assets/image/login_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  font-size: 2vh;
}

.login_content {
  background-color: #fff;
  margin: auto;
  height: 600px;
  width: 1200px;
  display: flex;
}

.login_left {
  height: 100%;
}

.login_left img {
  width: 800px;
  height: 600px;
}

.login_right {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sys_title {
  color: #42b983;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
}

.login_form {
  width: 300px;
  position: relative;
}

.login_tips {
  position: absolute;
  bottom: -20px;
  color: red;
  font-size: 14px;
}

/*element ui输入框按钮样式修改*/
/*/deep/深度选择器*/
/deep/ .login_form .el-input {
  font-size: 20px;
  margin-top: 10px;
}

/deep/ .login_form > .el-input > .el-input__inner {
  border: 2px solid #5749ff;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding-left: 40px;
}

/deep/ .login_form .el-input__prefix {
  padding-left: 2px;
  color: #5749ff;
}

/deep/ .login_right .el-button {
  margin-top: 40px;
  width: 300px;
  height: 40px;
  background-color: #5749ff;
  border: none;
  font-size: 16px;
}
</style>
